<template>
  <div class="modulesWrapper">
    <div class="classWrapper">
      <div class="filter">
        <el-input
          v-model="searchValue"
          style="max-width: 250px"
          placeholder="请输入班级"
          class="input-with-select"
        >
          <template #append>
            <el-button :icon="Search" @click="search()"/>
          </template>
        </el-input>

        <div style="padding-left: 10px">
          <el-button type="primary" @click="addClass()">新增班级</el-button>
        </div>
      </div>
      <div class="table">
         <el-table :data="data" border style="width: 100%" max-height="450">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="id" label="id" />
          <el-table-column prop="class" label="年级" />
          <el-table-column prop="number" label="班号" />
          <el-table-column prop="teachers" label="关联老师" />
          <el-table-column prop="date" label="更新时间" min-width="120" />
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
              <el-button link type="danger" size="small" @click="deleteClass(scope.row)">
                删除
              </el-button>
              <el-button link type="primary" size="small" @click="edit(scope.row)">修改</el-button>
              <el-button link  size="small" @click="detail(scope.row)">明细</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination background layout="prev, pager, next" :total="total" />
      </div>
      detailVisible:{{ detailVisible }}
    </div>
     <Teleport to="body">
      <ClassInfo
        v-if="dialogVisible"
        :visiable="dialogVisible"
        :action="action"
        @updateVisiable="updateVisiable"
      />
      <class-info-detail
        v-if="detailVisible"
        :visiable="detailVisible"
        @updateDetailVisiable="updateDetailVisiable"
      />
    </Teleport>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import ClassInfo from './classInfo.vue';
import ClassInfoDetail from './classInfoDetail.vue';
let arr = [];
for (let i = 0; i < 16; i++) {
  arr.push({  
    teachers: ['张三', '李四'],
    number: '1班',
    class: '一年级',
    id: 'ST' + i,
    date: '2016-10-03',
  });
}
const data = reactive(arr);
const total = ref(data.length);
const action = ref('');
const dialogVisible = ref(false);
const searchValue = ref('');
 
const detailVisible =  ref(false);

function updateVisiable(val: boolean) {
  dialogVisible.value = val;
}
function addClass() {
  action.value = 'add';
  dialogVisible.value = true;
}
function edit(row: any) {
  action.value = 'edit';
  dialogVisible.value = true;
}
function deleteClass(row: any) {
  console.log(row);
}
function search() {
  console.log(searchValue.value);
}
const detail = (row: any) => {
  console.log(row);
  detailVisible.value = true;
};
function updateDetailVisiable(val: boolean) {
  detailVisible.value = val;
};
</script>

<style lang="scss" scoped>
@use "./class-manage.scss";
</style>

